<template>
  <div class="container">
    <nav-bar title="可用优惠券" />
    <switch-tab 
      :tabList="tabList" 
      :curTabIndex="curTabIndex"
      :styleType="1"
      @itemClicked="tabClicked" 
      ref="switch"
    />
    <!-- <div class="tips">
      <img class="logo" src='../../assets/img/logo-shape.png' />
      <div class="dis">
        <p>分享给好友</p>
        <p>获超值优惠券</p>
      </div>
    </div> -->
    <div class="list">
      <div class="item"
        @click="goToProductList" 
        v-for="(item, index) in userCoupon" 
        :key="index"
      >
        <div class="main">
          <div class="title">
            <div class="name">{{item.CouponName}}</div>
            <div class="worth">{{item.StartTime}} - {{item.EndTime}}</div>
          </div>
          <div class="value">
            <i>{{item.Price}}</i><span>元</span>
          </div>
        </div>
        <div class="infor">
          <div class="cost">{{item.Remark}}</div>
          <div class="canuse">
            {{item.used ? '已使用' : ''}}
            {{item.expired ? '已过期' : ''}}
            {{item.canUse ? '去使用' : ''}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import SwitchTab from 'components/common/SwitchTab'
import { getUserCoupon } from '../../network/coupon'
import { format } from 'date-fns'

export default {
  components: {
    NavBar,
    SwitchTab
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      curTabIndex: 0,
      tabList: [
        '可使用',
        '已使用',
        '已过期'
      ],
      userCouponOrigin: [],
      userCoupon: [],
    }
  },
  mounted() {
    this.getUserCoupon(() => {
      this.$refs.switch.tabClicked(0)
    })
  },
  methods: {
    tabClicked(e){
      this.curTabIndex = e
      if(e === 0){ // 可使用
        this.userCoupon = this.userCouponOrigin.filter(item => {
          let expired = new Date().getTime() > new Date(item.EndTime).getTime()
          let used = item.UseStatus === 1
          item.canUse = !used && !expired
          return !used && !expired
        })
      } else 
      if(e === 1){ // 已使用
        this.userCoupon = this.userCouponOrigin.filter(item => {
          let used = item.UseStatus === 1
          item.used = used
          return used
        })
      } else 
      if(e === 2){ // 已过期
        this.userCoupon = this.userCouponOrigin.filter(item => {
          let expired = new Date().getTime() > new Date(item.EndTime).getTime()
          let used = item.UseStatus === 1
          item.expired = !used && expired
          return !used && expired
        })
      }
    },
    getUserCoupon(cb){
      let requestData = {
        userkey: this.userKey
      }
      getUserCoupon(requestData, list => {
        list = list.map(item => {
          item.StartTime = format(new Date(item.StartTime),'yyyy-MM-dd')
          item.EndTime = format(new Date(item.EndTime),'yyyy-MM-dd')
          
          return item
        })
        this.userCouponOrigin = list
        this.userCoupon = list
        cb && cb(list)
      })
    },
    goToProductList(){
      this.$router.push('/best')
    }
  },
}
</script>

<style scoped>
.tips{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 10px;
  height: 90px;
  border-radius: 6px;
  overflow: hidden;
  background-color: #000000;
}
.tips .logo{
  width: 52px;
  height: 52px;
  margin: 0 60px;
}
.tips .dis{
  flex-grow: 1;
  color: #ffffff;
  line-height: 1.8;
  font-size: 16px;
}
.list{
  margin-top: 10px;
}
.list .item{
  margin: 0 10px;
  margin-bottom: 10px;
  padding: 20px 0 0 0;
  background-color: #ffffff;
}
.list .item .main{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
}
.list .item .main .value i{
  font-size: 30px;
  padding-right: 5px;
}
.list .item .main .name{
  font-size: 16px;
}
.list .item .main .worth{
  font-size: 12px;
  padding-top: 6px;
  color: #999999;
}
.list .item .infor{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  font-size: 12px;
  line-height: 1.8;
  color: #666666;
  padding: 12px 15px;
  margin-top: 15px;
  border-top: 1px solid #f6f6f6;
}
.list .item .infor:before,
.list .item .infor:after{
  position: absolute;
  top: -7px;
  display: block;
  content: '';
  width: 6px;
  height: 12px;
  background-color: #f2f2f2;
}
.list .item .infor:before{
  left: 0;
  border-radius: 0 6px 6px 0;
}
.list .item .infor:after{
  right: 0;
  border-radius: 6px 0 0 6px;
}
.list .item .infor .num-area{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>